<template>
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h1 class="login-title">MES 系统登录</h1>
                <p class="login-subtitle">欢迎使用制造执行系统</p>
            </div>

            <el-form :model="form" class="login-form" label-position="top">
                <el-form-item label="用户名" class="form-item">
                    <el-input v-model="form.loginAccoun" placeholder="请输入用户名" size="large" :prefix-icon="User"
                        clearable />
                </el-form-item>

                <el-form-item label="密码" class="form-item">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large"
                        :prefix-icon="Lock" show-password clearable />
                </el-form-item>

                <el-form-item label="验证码" class="form-item">
                    <div class="verification-container">
                        <el-input v-model="form.vcode" placeholder="请输入验证码" size="large" :prefix-icon="Key" clearable
                            class="verification-input" />
                        <div class="verification-code" @click="verification" :class="{ 'clicked': isCodeClicked }">
                            {{ form.scode }}
                        </div>
                    </div>
                    <div class="verification-hint">点击验证码刷新</div>
                </el-form-item>

                <el-form-item class="login-button-item">
                    <el-button type="primary" @click="appuser" size="large" class="login-button" :loading="isLoading">
                        <el-icon class="mr-2">
                            <Right />
                        </el-icon>
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
import read from '@/dwrapper/axioswrapper'
import { User, Lock, Key, Right } from '@element-plus/icons-vue'

const router = useRouter()
const store = useCounterStore()

const form = reactive({
    loginAccoun: '',
    password: '',
    vcode: '',
    scode: ""
})

const isLoading = ref(false)
const isCodeClicked = ref(false)

//登录
const appuser = async () => {
    if (form.vcode.toLowerCase() !== form.scode.toLowerCase()) {
        ElMessage.error('验证码错误');
        return;
    }

    isLoading.value = true
    try {
        const res = await read.post('/api/WorkOrders/loginapp', form)
        if (res.data.code == 1100) {
            ElMessage.success(res.data.message)
            store.usercount.userId = res.data.data.userId
            store.usercount.loginAccoun = res.data.data.loginAccoun
            store.usercount.realName = res.data.data.realName
            store.usercount.roleId = res.data.data.roleId
            store.usercount.roleName = res.data.data.roleName
            store.usercount.token = res.data.data.token
            router.push({
                name: 'Main'
            })
        } else {
            ElMessage.error(res.data.message)
        }
    } catch (error) {
        ElMessage.error('登录失败，请重试')
    } finally {
        isLoading.value = false
    }
}

//验证码
const verification = () => {
    isCodeClicked.value = true
    let xind = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789"
    let code = ""
    for (let i = 1; i <= 4; i++) {
        let sert = Math.floor(Math.random() * xind.length)
        code += xind[sert]
    }
    form.scode = code

    // 重置点击效果
    setTimeout(() => {
        isCodeClicked.value = false
    }, 200)
}


onMounted(() => {
    verification()
})

</script>

<style>
/* 确保页面不会出现滚动条 */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

<style scoped>
.login-container {
    height: 100vh;
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
}

.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp 0.6s ease-out;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

.login-form {
    width: 100%;
    max-width: 500px;
}

.form-item {
    margin-bottom: 24px;
}

.form-item :deep(.el-form-item__label) {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 8px;
}

.form-item :deep(.el-input__wrapper) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e8ed;
    transition: all 0.3s ease;
}

.form-item :deep(.el-input__wrapper:hover) {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.form-item :deep(.el-input__wrapper.is-focus) {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.verification-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.verification-input {
    flex: 1;
}

.verification-code {
    width: 100px;
    height: 40px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(238, 90, 36, 0.3);
}

.verification-code:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(238, 90, 36, 0.4);
}

.verification-code.clicked {
    transform: scale(0.95);
    background: linear-gradient(135deg, #ff8a80, #ff7043);
}

.verification-hint {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 4px;
    text-align: center;
}

.login-button-item {
    margin-top: 30px;
    margin-bottom: 0;
}

.login-button {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

.mr-2 {
    margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .login-card {
        padding: 20px;
    }

    .login-form {
        max-width: 100%;
    }

    .login-title {
        font-size: 24px;
    }

    .verification-container {
        flex-direction: column;
        gap: 8px;
    }

    .verification-code {
        width: 100%;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 15px;
    }

    .login-title {
        font-size: 20px;
    }

    .login-subtitle {
        font-size: 12px;
    }
}

/* 输入框聚焦时的动画效果 */
.form-item :deep(.el-input__inner) {
    transition: all 0.3s ease;
}

.form-item :deep(.el-input__inner:focus) {
    transform: translateY(-1px);
}

/* 按钮加载状态 */
.login-button.is-loading {
    pointer-events: none;
}
</style>